<template>
  <div class="home-page">
    <GlobalHeader />
    <Content />
  </div>
  <van-dialog v-model:show="errorShow" :show-confirm-button="false">
    <ErrorDialogs :info="errInfo" @fault="emitFault" />
  </van-dialog>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, watch } from 'vue'
import { useStore } from 'vuex'
import { faultFilter } from '@/utils/filter.ts'

import GlobalHeader from '@/components/HomeComp/GlobalHeader.vue'
import Content from '@/components/HomeComp/Content.vue'
import ErrorDialogs from '@/components/ErrorDialogs.vue'

const store = useStore()
const errInfo = ref({})
const errorShow = ref(false)

const instance = getCurrentInstance() as any
const Bus = (val: number) => {
  console.log('b=====>str', val)
}
instance?.proxy?.$Bus.on('emit-mode', Bus)
const init = () => {
  const { fault } = store.state.deviceInfo
  if (fault > 0) {
    errorShow.value = true
    errInfo.value = faultFilter(fault)
  }
}
init()

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)

const emitFault = () => {
  console.log('emitFault')
  errorShow.value = false
}
</script>
<style lang="less" scoped>
@import url(../assets/style/home.less);
</style>
